<template>
<div>
  <v-toolbar dense elevation="2">
    <div>
      <v-btn icon @click="$router.go(-1)">
        <v-icon small>mdi-arrow-expand-left</v-icon>
      </v-btn>
    </div>
    <div>
      我的收货地址
    </div>
    <v-spacer/>
    <div>
      <v-btn text color="success" @click="openDialog">新增地址</v-btn>
    </div>
  </v-toolbar>
  <v-main>
    <v-list two-line>
      <template v-for="address in addressList">
        <v-list-item :key="address.id">
          <v-list-item-content>
            <v-list-item-title>
              {{address.address+address.addressDetails}}
            </v-list-item-title>
            <v-list-item-subtitle>
              {{address.name}}&nbsp;{{address.phone}}
            </v-list-item-subtitle>
          </v-list-item-content>
          <v-list-item-action>
            <v-btn icon @click="openDialog(address)"><v-icon>mdi-square-edit-outline</v-icon></v-btn>
          </v-list-item-action>
        </v-list-item>
        <v-divider/>
      </template>
    </v-list>
  </v-main>

  <v-dialog persistent v-model="dialog" width="90%" max-width="500px">
    <v-card >
      <v-card-title>
        <div>收货地址</div>
        <v-spacer/>
        <div>
          <v-btn text color="#4caf50" @click="closeDialog">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </div>
      </v-card-title>
      <v-card-text>
        <v-form>
          <v-row no-gutters>
            <v-col cols="7">
              <v-text-field label="收货地址" disabled outlined dense v-model="addressForm.address">
              </v-text-field>
            </v-col>
            <v-col cols="5">
              <v-btn outlined color="success" @click="setAddress">
                点击获取地址
              </v-btn>
            </v-col>
            <v-col cols="12">
              <v-text-field label="详细地址,到门牌号" outlined dense v-model="addressForm.addressDetails"></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field label="联系人" outlined dense v-model="addressForm.name"></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-text-field label="手机号" type="number" outlined dense v-model="addressForm.phone"></v-text-field>
            </v-col>
            <v-col cols="12">
              <v-btn block color="success" @click="handleSaveAddress">保存收货地址</v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</div>
</template>

<script>
import {saveOrUpdateAddress, selectAddressByCustomerId} from "@/http/api/address";

export default {
  name: "Address",
  data:()=>({
    dialog:false,
    addressList:[],
    addressForm:{
      address:null,
      addressDetails:null,
      name:null,
      phone:null
    },
    defaultAddressForm:{
      address:null,
      addressDetails:null,
      name:null,
      phone:null
    }
  }),
  computed:{
    loginCustomer(){
      return this.$store.state.customer
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      if (!this.loginCustomer){
        this.$breadstick.notify("❌登录过期");
        return;
      }
      selectAddressByCustomerId(this.loginCustomer.id).then(res=>{
        this.addressList = res.data
      })
    },
    openDialog(address){
      if (address){
        this.addressForm = JSON.parse(JSON.stringify(address))
      }else {
        this.addressForm = JSON.parse(JSON.stringify(this.defaultAddressForm))
      }
      this.dialog = true
    },
    setAddress(){
      this.addressForm.address = "福建省-福州市-"
    },
    handleSaveAddress(){
      if (!this.addressForm.address){
        this.$breadstick.notify("请填写地址");
        return;
      }
      if (!this.addressForm.addressDetails){
        this.$breadstick.notify("请填写详细地址");
        return;
      }
      if (!this.addressForm.name){
        this.$breadstick.notify("请填写联系人");
        return;
      }
      if (!this.addressForm.phone){
        this.$breadstick.notify("请填写手机号");
        return;
      }
      if (this.loginCustomer){
        this.addressForm.customerId = this.loginCustomer.id
        saveOrUpdateAddress(this.addressForm).then(res=>{
          this.$breadstick.notify("✔"+res.data)
          this.init()
          this.closeDialog()
        })
      }else {
        this.$breadstick.notify("❌登录过期");
        this.closeDialog()
      }
    },
    closeDialog(){
      this.dialog = false
      this.addressForm = JSON.parse(JSON.stringify(this.defaultAddressForm))
    }
  }
}
</script>

<style scoped>

</style>